React Server Actions: Una Guida Completa all'Elaborazione dei Moduli e all'Integrazione con il Server

            // app/actions.js
'use server'

import { cookies } from 'next/headers'
import { revalidatePath } from 'next/cache'

export async function createPost(formData) {
  const title = formData.get('title')
  const content = formData.get('content')

  // Simula l'inserimento nel database
  await new Promise((resolve) => setTimeout(resolve, 1000))

  console.log('Post created:', { title, content })

  // Riconvalida la rotta /blog
  revalidatePath('/blog')

  return { message: 'Post creato con successo!' }
}

            

              
                Copy
              
            
          

            // app/components/PostForm.js
import { createPost } from '../actions'
'use client'

import { useFormStatus } from 'react-dom'

function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    
      {pending ? 'Creazione...' : 'Crea Post'}
    
  )
}

export default function PostForm() {
  return (
    

      Titolo:
      

      Contenuto:
      
      <SubmitButton />
    </form>
  )
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbXBvbmVudHMvUG9zdEZvcm0uanMKaW1wb3J0IHsgY3JlYXRlUG9zdCB9IGZyb20gJy4uL2FjdGlvbnMnCid1c2UgY2xpZW50JwoKaW1wb3J0IHsgdXNlRm9ybVN0YXR1cyB9IGZyb20gJ3JlYWN0LWRvbScKCmZ1bmN0aW9uIFN1Ym1pdEJ1dHRvbigpIHsKICBjb25zdCB7IHBlbmRpbmcgfSA9IHVzZUZvcm1TdGF0dXMoKQoKICByZXR1cm4gKAogICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiIGRpc2FibGVkPXtwZW5kaW5nfT4KICAgICAge3BlbmRpbmcgPyAnQ3JlYXppb25lLi4uJyA6ICdDcmVhIFBvc3QnfQogICAgPC9idXR0b24+CiAgKQp9CgpleHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBQb3N0Rm9ybSgpIHsKICByZXR1cm4gKAogICAgPGZvcm0gYWN0aW9uPXtjcmVhdGVQb3N0fT4KICAgICAgPGxhYmVsIGh0bWxGb3I9InRpdGxlIj5UaXRvbG86PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJ0aXRsZSIgbmFtZT0idGl0bGUiIHJlcXVpcmVkIC8+CgogICAgICA8bGFiZWwgaHRtbEZvcj0iY29udGVudCI+Q29udGVudXRvOjwvbGFiZWw+CiAgICAgIDx0ZXh0YXJlYSBpZD0iY29udGVudCIgbmFtZT0iY29udGVudCIgcmVxdWlyZWQgLz4KCiAgICAgIDxTdWJtaXRCdXR0b24gLz4KICAgIDwvZm9ybT4KICApCn0K"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>In questo esempio:</p>

<ul>
  <li>L'azione <code>createPost</code> viene importata dal file <code>../actions</code>.</li>
  <li>La prop <code>action</code> dell'elemento <code><form></code> è impostata sulla funzione <code>createPost</code>.</li>
  <li>Il componente <code>SubmitButton</code> utilizza l'hook <code>useFormStatus</code> per determinare se il modulo è attualmente in fase di invio. Disabilita il pulsante durante l'invio del modulo per prevenire invii multipli.</li>
</ul>

<h3>Gestire i Dati del Modulo</h3>

<p>Le Server Actions ricevono automaticamente i dati del modulo come un oggetto <code>FormData</code>. È possibile accedere ai dati utilizzando il metodo <code>get</code> dell'oggetto <code>FormData</code>. Ecco un esempio:</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/actions.js
'use server'

export async function createPost(formData) {
  const title = formData.get('title')
  const content = formData.get('content')

  // ...
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2FjdGlvbnMuanMKJ3VzZSBzZXJ2ZXInCgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gY3JlYXRlUG9zdChmb3JtRGF0YSkgewogIGNvbnN0IHRpdGxlID0gZm9ybURhdGEuZ2V0KCd0aXRsZScpCiAgY29uc3QgY29udGVudCA9IGZvcm1EYXRhLmdldCgnY29udGVudCcpCgogIC8vIC4uLgp9Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>In questo esempio, <code>title</code> e <code>content</code> vengono estratti dall'oggetto <code>formData</code> utilizzando il metodo <code>get</code>.</p>

<h3>Fornire Feedback all'Utente</h3>

<p>È possibile fornire feedback all'utente restituendo un valore dalla Server Action. Questo valore sarà disponibile per il componente che ha invocato l'azione. È possibile utilizzare questo valore per mostrare messaggi di successo o di errore all'utente. Ecco un esempio:</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/actions.js
'use server'

export async function createPost(formData) {
  // ...

  return { message: 'Post creato con successo!' }
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2FjdGlvbnMuanMKJ3VzZSBzZXJ2ZXInCgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gY3JlYXRlUG9zdChmb3JtRGF0YSkgewogIC8vIC4uLgoKICByZXR1cm4geyBtZXNzYWdlOiAnUG9zdCBjcmVhdG8gY29uIHN1Y2Nlc3NvIScgfQp9Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/components/PostForm.js
'use client'

import { useState } from 'react'
import { createPost } from '../actions'

export default function PostForm() {
  const [message, setMessage] = useState(null)

  async function handleSubmit(formData) {
    const result = await createPost(formData)
    setMessage(result.message)
  }

  return (
    <div>
      <form action={handleSubmit}>
        {/* ... */}
      </form>
      {message && <p>{message}</p>}
    </div>
  )
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbXBvbmVudHMvUG9zdEZvcm0uanMKJ3VzZSBjbGllbnQnCgppbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JwppbXBvcnQgeyBjcmVhdGVQb3N0IH0gZnJvbSAnLi4vYWN0aW9ucycKCmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIFBvc3RGb3JtKCkgewogIGNvbnN0IFttZXNzYWdlLCBzZXRNZXNzYWdlXSA9IHVzZVN0YXRlKG51bGwpCgogIGFzeW5jIGZ1bmN0aW9uIGhhbmRsZVN1Ym1pdChmb3JtRGF0YSkgewogICAgY29uc3QgcmVzdWx0ID0gYXdhaXQgY3JlYXRlUG9zdChmb3JtRGF0YSkKICAgIHNldE1lc3NhZ2UocmVzdWx0Lm1lc3NhZ2UpCiAgfQoKICByZXR1cm4gKAogICAgPGRpdj4KICAgICAgPGZvcm0gYWN0aW9uPXtoYW5kbGVTdWJtaXR9PgogICAgICAgIHsvKiAuLi4gKi99CiAgICAgIDwvZm9ybT4KICAgICAge21lc3NhZ2UgJiYgPHA+e21lc3NhZ2V9PC9wPn0KICAgIDwvZGl2PgogICkKfQo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>In questo esempio:</p>

<ul>
  <li>L'azione <code>createPost</code> restituisce un oggetto con una proprietà <code>message</code>.</li>
  <li>Il componente <code>PostForm</code> utilizza l'hook <code>useState</code> per memorizzare il messaggio.</li>
  <li>La funzione <code>handleSubmit</code> chiama l'azione <code>createPost</code> e imposta lo stato del messaggio sul valore restituito dall'azione.</li>
  <li>Il messaggio viene mostrato all'utente in un elemento <code><p></code>.</li>
</ul>

<h3>Gestione degli Errori</h3>

<p>Le Server Actions possono lanciare errori, che verranno catturati dal runtime di React. È possibile gestire questi errori nei componenti utilizzando un blocco <code>try...catch</code>. Ecco un esempio:</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/actions.js
'use server'

export async function createPost(formData) {
  // ...

  if (!title || title.length < 5) {
    throw new Error('Il titolo deve essere lungo almeno 5 caratteri.')
  }

  return { message: 'Post creato con successo!' }
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2FjdGlvbnMuanMKJ3VzZSBzZXJ2ZXInCgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gY3JlYXRlUG9zdChmb3JtRGF0YSkgewogIC8vIC4uLgoKICBpZiAoIXRpdGxlIHx8IHRpdGxlLmxlbmd0aCA8IDUpIHsKICAgIHRocm93IG5ldyBFcnJvcignSWwgdGl0b2xvIGRldmUgZXNzZXJlIGx1bmdvIGFsbWVubyA1IGNhcmF0dGVyaS4nKQogIH0KCiAgcmV0dXJuIHsgbWVzc2FnZTogJ1Bvc3QgY3JlYXRvIGNvbiBzdWNjZXNzbyEnIH0KfQo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/components/PostForm.js
'use client'

import { useState } from 'react'
import { createPost } from '../actions'

export default function PostForm() {
  const [message, setMessage] = useState(null)
  const [error, setError] = useState(null)

  async function handleSubmit(formData) {
    try {
      const result = await createPost(formData)
      setMessage(result.message)
      setError(null)
    } catch (e) {
      setError(e.message)
      setMessage(null)
    }
  }

  return (
    <div>
      <form action={handleSubmit}>
        {/* ... */}
      </form>
      {message && <p>{message}</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  )
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbXBvbmVudHMvUG9zdEZvcm0uanMKJ3VzZSBjbGllbnQnCgppbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JwppbXBvcnQgeyBjcmVhdGVQb3N0IH0gZnJvbSAnLi4vYWN0aW9ucycKCmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIFBvc3RGb3JtKCkgewogIGNvbnN0IFttZXNzYWdlLCBzZXRNZXNzYWdlXSA9IHVzZVN0YXRlKG51bGwpCiAgY29uc3QgW2Vycm9yLCBzZXRFcnJvcl0gPSB1c2VTdGF0ZShudWxsKQoKICBhc3luYyBmdW5jdGlvbiBoYW5kbGVTdWJtaXQoZm9ybURhdGEpIHsKICAgIHRyeSB7CiAgICAgIGNvbnN0IHJlc3VsdCA9IGF3YWl0IGNyZWF0ZVBvc3QoZm9ybURhdGEpCiAgICAgIHNldE1lc3NhZ2UocmVzdWx0Lm1lc3NhZ2UpCiAgICAgIHNldEVycm9yKG51bGwpCiAgICB9IGNhdGNoIChlKSB7CiAgICAgIHNldEVycm9yKGUubWVzc2FnZSkKICAgICAgc2V0TWVzc2FnZShudWxsKQogICAgfQogIH0KCiAgcmV0dXJuICgKICAgIDxkaXY+CiAgICAgIDxmb3JtIGFjdGlvbj17aGFuZGxlU3VibWl0fT4KICAgICAgICB7LyogLi4uICovfQogICAgICA8L2Zvcm0+CiAgICAgIHttZXNzYWdlICYmIDxwPnttZXNzYWdlfTwvcD59CiAgICAgIHtlcnJvciAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ3JlZCcgfX0+e2Vycm9yfTwvcD59CiAgICA8L2Rpdj4KICApCn0K"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>In questo esempio:</p>

<ul>
  <li>L'azione <code>createPost</code> lancia un errore se il titolo ha meno di 5 caratteri.</li>
  <li>Il componente <code>PostForm</code> utilizza un blocco <code>try...catch</code> per catturare eventuali errori lanciati dall'azione <code>createPost</code>.</li>
  <li>Se viene catturato un errore, il messaggio di errore viene mostrato all'utente in un elemento <code><p></code> con testo rosso.</li>
</ul>

<h2>Migliori Pratiche per l'Utilizzo delle React Server Actions</h2>

<p>Per assicurarti di utilizzare le Server Actions in modo efficace, considera le seguenti migliori pratiche:</p>

<h3>Utilizzare la Direttiva <code>'use server'</code></h3>

<p>Includere sempre la direttiva <code>'use server'</code> all'inizio dei file delle Server Action. Questa direttiva indica al compilatore di React che le funzioni nel file devono essere eseguite sul server. Questo è cruciale per la sicurezza e le prestazioni.</p>

<h3>Mantenere le Actions Piccole e Mirate</h3>

<p>Ogni Server Action dovrebbe svolgere un compito singolo e ben definito. Questo rende le azioni più facili da capire, testare e mantenere. Evitare di creare actions grandi e monolitiche che svolgono più compiti non correlati.</p>

<h3>Validare i Dati sul Server</h3>

<p>Validare sempre i dati sul server prima di eseguire qualsiasi operazione. Questo protegge l'applicazione da dati non validi o malevoli. Utilizzare tecniche di validazione appropriate, come la validazione del tipo di dato, i controlli sulla lunghezza e le espressioni regolari. La validazione lato server è più sicura della validazione lato client, che può essere aggirata.</p>

<h3>Gestire gli Errori con Grazia</h3>

<p>Gestire sempre gli errori con grazia nelle Server Actions. Questo impedisce che l'applicazione si blocchi e offre un'esperienza utente migliore. Utilizzare blocchi <code>try...catch</code> per catturare eventuali eccezioni che possono verificarsi e fornire messaggi di errore informativi all'utente.</p>

<h3>Utilizzare gli Aggiornamenti Ottimistici</h3>

<p>Utilizzare gli aggiornamenti ottimistici per migliorare la reattività percepita dell'applicazione. Aggiornare immediatamente l'interfaccia utente per riflettere il risultato atteso di un'azione, anche prima che il server abbia confermato la modifica. Se l'operazione lato server fallisce, è possibile ripristinare facilmente l'interfaccia utente al suo stato precedente.</p>

<h3>Considerare il Caching</h3>

<p>Considerare di memorizzare nella cache i risultati delle Server Actions per migliorare le prestazioni. Questo può essere particolarmente vantaggioso per le actions che eseguono operazioni costose o che vengono chiamate frequentemente. Utilizzare strategie di caching appropriate, come il caching HTTP o il caching lato server, per ridurre il carico sul server.</p>

<h3>Proteggere le Proprie Server Actions</h3>

<p>Implementare misure di sicurezza per proteggere le Server Actions da accessi e manipolazioni non autorizzati. Utilizzare l'autenticazione e l'autorizzazione per garantire che solo gli utenti autorizzati possano eseguire determinate azioni. Proteggersi dalle vulnerabilità di sicurezza comuni, come il cross-site scripting (XSS) e l'SQL injection. Sanificare sempre l'input dell'utente prima di utilizzarlo in query di database o altre operazioni sensibili.</p>

<h2>Casi d'Uso Comuni per le React Server Actions</h2>

<p>Le Server Actions sono adatte a una varietà di casi d'uso, tra cui:</p>

<h3>Invio di Moduli (Form)</h3>

<p>La gestione dell'invio dei moduli è uno dei casi d'uso più comuni per le Server Actions. È possibile utilizzare le Server Actions per elaborare i dati dei moduli, validare l'input e archiviare i dati in un database. Ciò elimina la necessità di endpoint API separati e semplifica il flusso di lavoro di sviluppo. Ad esempio, la gestione della registrazione degli utenti, dei moduli di contatto o delle recensioni dei prodotti.</p>

<h3>Mutazioni dei Dati</h3>

<p>Le Server Actions possono essere utilizzate per eseguire mutazioni dei dati, come la creazione, l'aggiornamento o l'eliminazione di dati in un database. Ciò consente di aggiornare i dati dell'applicazione in risposta alle azioni dell'utente. Esempi includono l'aggiornamento dei profili utente, l'aggiunta di commenti o l'eliminazione di post.</p>

<h3>Autenticazione e Autorizzazione</h3>

<p>Le Server Actions possono essere utilizzate per gestire l'autenticazione e l'autorizzazione. È possibile utilizzare le Server Actions per verificare le credenziali dell'utente, emettere token e proteggere le risorse sensibili. Ciò garantisce che solo gli utenti autorizzati possano accedere a determinate parti dell'applicazione. Ad esempio, l'implementazione delle funzionalità di login/logout, la gestione dei ruoli degli utenti o l'autorizzazione all'accesso a funzionalità specifiche.</p>

<h3>Aggiornamenti in Tempo Reale</h3>

<p>Sebbene le Server Actions non siano intrinsecamente in tempo reale, possono essere combinate con altre tecnologie, come i WebSockets, per fornire aggiornamenti in tempo reale all'applicazione. È possibile utilizzare le Server Actions per attivare eventi che vengono poi trasmessi ai client connessi tramite WebSockets. Pensate ad applicazioni di chat dal vivo, editing collaborativo di documenti o dashboard in tempo reale.</p>

<h2>Considerazioni sull'Internazionalizzazione (i18n)</h2>

<p>Quando si sviluppano applicazioni con Server Actions per un pubblico globale, l'internazionalizzazione (i18n) è cruciale. Ecco alcune considerazioni chiave:</p>

<h3>Localizzazione dei Messaggi di Errore</h3>

<p>Assicurarsi che i messaggi di errore restituiti dalle Server Actions siano localizzati nella lingua preferita dell'utente. Ciò offre un'esperienza utente migliore e rende più facile per gli utenti capire e risolvere eventuali problemi. Utilizzare librerie i18n per gestire le traduzioni e visualizzare dinamicamente i messaggi in base alla locale dell'utente.</p>

<h3>Formattazione di Date e Numeri</h3>

<p>Formattare date e numeri secondo la locale dell'utente. Diverse locali hanno convenzioni diverse per la visualizzazione di date, numeri e valute. Utilizzare librerie i18n per formattare correttamente questi valori in base alla locale dell'utente.</p>

<h3>Gestione dei Fusi Orari</h3>

<p>Quando si ha a che fare con date e orari, prestare attenzione ai fusi orari. Archiviare date e orari in formato UTC e convertirli al fuso orario locale dell'utente al momento della visualizzazione. Ciò garantisce che date e orari vengano visualizzati correttamente indipendentemente dalla posizione dell'utente. Ad esempio, per la pianificazione di eventi o la visualizzazione di timestamp.</p>

<h3>Conversione di Valuta</h3>

<p>Se la tua applicazione gestisce valute, fornisci una funzionalità di conversione di valuta. Consenti agli utenti di visualizzare i prezzi nella loro valuta locale. Utilizza un'API di conversione di valuta affidabile per garantire che i tassi di cambio siano aggiornati. Questo è particolarmente importante per le applicazioni di e-commerce e i servizi finanziari.</p>

<h3>Supporto da Destra a Sinistra (RTL)</h3>

<p>Se la tua applicazione supporta lingue scritte da destra a sinistra (RTL), come l'arabo o l'ebraico, assicurati che la tua interfaccia utente sia correttamente specchiata per queste lingue. Ciò include la specchiatura del layout, della direzione del testo e delle icone. Utilizza le proprietà logiche CSS per creare layout che si adattano alle diverse direzioni del testo.</p>

<h2>Esempi di React Server Actions in Applicazioni Globali</h2>

<p>Ecco alcuni esempi di come le React Server Actions possono essere utilizzate in applicazioni globali:</p>

<h3>Piattaforma E-commerce</h3>

<ul>
  <li><b>Aggiunta di un prodotto al carrello:</b> Una Server Action può essere utilizzata per aggiungere un prodotto al carrello della spesa dell'utente. L'azione può validare l'ID del prodotto, controllare i livelli di inventario e aggiornare il carrello nel database.</li>
  <li><b>Elaborazione di un ordine:</b> Una Server Action può essere utilizzata per elaborare un ordine. L'azione può validare le informazioni di pagamento dell'utente, calcolare i costi di spedizione e creare un ordine nel database.</li>
  <li><b>Iscrizione a una newsletter:</b> Una Server Action può gestire le iscrizioni alla newsletter, validando gli indirizzi email e aggiungendoli alla lista degli iscritti.</li>
</ul>

<h3>Piattaforma di Social Media</h3>

<ul>
  <li><b>Pubblicazione di un commento:</b> Una Server Action può essere utilizzata per pubblicare un commento su un post. L'azione può validare il testo del commento, associarlo al post e archiviarlo nel database.</li>
  <li><b>Mettere "Mi piace" a un post:</b> Una Server Action può essere utilizzata per mettere "Mi piace" a un post. L'azione può aggiornare il conteggio dei "Mi piace" per il post e archiviare il "Mi piace" nel database.</li>
  <li><b>Seguire un utente:</b> Le Server Actions possono gestire le richieste di "segui", bloccare utenti e aggiornare i conteggi dei follower.</li>
</ul>

<h3>Applicazione di Prenotazione Viaggi</h3>

<ul>
  <li><b>Ricerca di voli:</b> Le Server Actions possono essere utilizzate per interrogare la disponibilità dei voli in base a destinazione e date. L'azione può chiamare API esterne, filtrare i risultati e presentare le opzioni all'utente.</li>
  <li><b>Prenotazione di una camera d'albergo:</b> Le Server Actions possono gestire le prenotazioni alberghiere, confermando la disponibilità della camera ed elaborando i dettagli di pagamento.</li>
  <li><b>Recensire destinazioni di viaggio:</b> Una server action può gestire l'aggiunta e l'elaborazione di recensioni e valutazioni degli utenti.</li>
</ul>

<h2>React Server Components vs. Server Actions</h2>

<p>È importante capire la differenza tra React Server Components e Server Actions, poiché spesso lavorano insieme ma servono a scopi diversi:</p>

<h3>React Server Components</h3>

<p>I React Server Components sono componenti che vengono renderizzati sul server. Consentono di recuperare dati, eseguire logica e renderizzare elementi dell'interfaccia utente sul server, il che può migliorare le prestazioni e ridurre la quantità di JavaScript che deve essere scaricato ed eseguito sul client. I Server Components servono principalmente per il rendering dell'interfaccia utente e il recupero dei dati iniziali.</p>

<h3>Server Actions</h3>

<p>Le Server Actions sono funzioni asincrone che vengono eseguite sul server in risposta alle interazioni dell'utente, come l'invio di moduli. Servono principalmente per gestire le mutazioni dei dati, eseguire logica lato server e fornire feedback all'utente. Le Server Actions vengono invocate dai componenti client, tipicamente in risposta all'invio di moduli o ad altri eventi dell'utente.</p>

<p><b>Differenze Chiave:</b></p>

<ul>
  <li><b>Scopo:</b> I Server Components servono per il rendering dell'UI, mentre le Server Actions servono per gestire le mutazioni dei dati.</li>
  <li><b>Esecuzione:</b> I Server Components vengono renderizzati sul server durante il caricamento iniziale della pagina, mentre le Server Actions vengono invocate dai componenti client in risposta alle interazioni dell'utente.</li>
  <li><b>Flusso di Dati:</b> I Server Components possono recuperare i dati direttamente dal server, mentre le Server Actions ricevono i dati dal client tramite invii di moduli o altri eventi utente.</li>
</ul>

<p><b>Come Lavorano Insieme:</b></p>

<p>I Server Components e le Server Actions possono essere utilizzati insieme per costruire applicazioni web interattive. I Server Components possono renderizzare l'interfaccia utente iniziale e recuperare i dati iniziali, mentre le Server Actions possono gestire le mutazioni dei dati e fornire feedback all'utente. Ad esempio, un Server Component potrebbe renderizzare un modulo, e una Server Action potrebbe gestire l'invio del modulo e aggiornare i dati nel database.</p>

<h2>Conclusione</h2>

<p>Le React Server Actions offrono un modo potente ed efficiente per gestire l'elaborazione dei moduli, le mutazioni dei dati e altre operazioni lato server nelle tue applicazioni React. Sfruttando le Server Actions, puoi semplificare il tuo flusso di lavoro di sviluppo, migliorare le prestazioni dell'applicazione, rafforzare la sicurezza e fornire un'esperienza utente migliore. Man mano che costruisci applicazioni web sempre più complesse, comprendere e utilizzare le React Server Actions diventerà una competenza essenziale per gli sviluppatori React moderni.</p>

<p>Ricorda di seguire le migliori pratiche delineate in questa guida per assicurarti di utilizzare le Server Actions in modo efficace e sicuro. Abbracciando le Server Actions, puoi sbloccare il pieno potenziale di React e costruire applicazioni web ad alte prestazioni e facili da usare per un pubblico globale.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React Server Actions</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">componenti server</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">elaborazione moduli</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">rendering lato server</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">mutazioni dati</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">framework React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">sviluppo web</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">recupero dati</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">integrazione server</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">miglioramento progressivo</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>